<!-- 首页模板文件 -->
<template>
	<view class="page">
		<!-- 轮播图 -->
		<view class="swiper-wrap mb-2">
			<swiper class="swiper" :indicator-dots="indicatorDots" :indicator-color="indicatorColor" :indicator-active-color="indicatorActiveColor"
			 :circular="circular" :autoplay="autoplay" :interval="interval" :duration="duration" :vertical="vertical">
				<swiper-item>
					<view class="swiper-item img-wrap">
						<view style="background-image: url(../../static/images/swiper1.jpg);" class="swiper-img"></view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item img-wrap">
						<view style="background-image: url(../../static/images/swiper2.jpg);" class="swiper-img"></view>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 关于我们 -->
		<view class="about pb-3 mb-2 bg-white">
			<!-- 品牌标题 -->
			<view class="about-title">
				<view class="title text-center mb-1">品牌不仅仅是商标</view>
				<view class="desc text-center">— brand —</view>
			</view>

			<!-- 品牌栅格 -->
			<view class="row band pb-3 text-center">
				<view class="col-4">
					<view class="icon">
						<view class="img-wrap">
							<image src="/static/images/about1.png" mode="aspectFit"></image>
						</view>
					</view>
					<view class="title">复合数据</view>
				</view>
				<view class="col-4">
					<view class="icon">
						<view class="img-wrap">
							<image src="/static/images/about2.png" mode="aspectFit"></image>
						</view>
					</view>
					<view class="title">软件开发</view>
				</view>
				<view class="col-4">
					<view class="icon">
						<view class="img-wrap">
							<image src="/static/images/about3.png" mode="aspectFit"></image>
						</view>
					</view>
					<view class="title">产品交互</view>
				</view>
			</view>

			<!-- 品牌按钮 -->
			<view class="btn-wrap text-center">
				<view class="btn btn-outline">
					关于我们
				</view>
			</view>
		</view>

		<!-- 案例 case -->
		<view class="case bg-white">
			<view class="title-block text-center p-2 border-bottom">
				<view class="v-line"></view>
				<view class="title">
					案例
				</view>
				<view class="v-line"></view>
			</view>
			<view class="scroll-view">
				<scroll-view class="scroll-view_H" scroll-x="true">
					<view class="pt-2 pb-2 pl-2">
						<view class="scroll-view-item_H">
							<view style="background-image: url(../../static/images/case1.png);" class="thumbnail"></view>
							<view class="footer">
								<view class="title ellipsis-1">软件开发</view>
								<view class="desc ellipsis-1">私家智能定制APP</view>
							</view>
						</view>
						
						<view class="scroll-view-item_H">
							<view style="background-image: url(../../static/images/case1.png);" class="thumbnail"></view>
							<view class="footer">
								<view class="title ellipsis-1">软件开发</view>
								<view class="desc ellipsis-1">私家智能定制APP</view>
							</view>
						</view>
						
						<view class="scroll-view-item_H">
							<view style="background-image: url(../../static/images/case1.png);" class="thumbnail"></view>
							<view class="footer">
								<view class="title ellipsis-1">软件开发</view>
								<view class="desc ellipsis-1">私家智能定制APP</view>
							</view>
						</view>
						
						<view class="scroll-view-item_H">
							<view style="background-image: url(../../static/images/case1.png);" class="thumbnail"></view>
							<view class="footer">
								<view class="title ellipsis-1">软件开发</view>
								<view class="desc ellipsis-1">私家智能定制APP</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				indicatorDots: true,
				indicatorColor: "#cccccc",
				indicatorActiveColor: "#ffffff",
				circular: true,
				autoplay: true,
				vertical: false,
				interval: 3000,
				duration: 1000
			}
		},
		onLoad() {

		},
		onReady() {
			this.getSwiperImageHeight()
		},
		methods: {
			getSwiperImageHeight() {

			}
		}
	}
</script>

<style scoped>
	.about-title {
		padding: 40rpx 0;
	}

	.about-title .title {
		font-size: 36rpx;
		color: #666666;
	}

	.about-title .desc {
		font-size: 30rpx;
		color: #666666;
	}


	.about .icon .img-wrap {
		width: 100rpx;
		height: 100rpx;
		line-height: 100rpx;
		margin: 0 auto;
	}

	.about .band .title {
		font-size: 28rpx;
		color: #777777;
		margin-top: 20rpx;
	}

	.case .title-block .title {
		display: inline-block;
		padding-left: 20rpx;
		padding-right: 20rpx;
		font-size: 30rpx;
	}

	.case .title-block .v-line {
		display: inline-block;
		width: 24rpx;
		height: 2rpx;
		background-color: #d9d9d9;
		vertical-align: middle;
		position: relative;
		top: 1px;
	}
	
	.scroll-view_H{
		white-space: nowrap;
	}
	
	.scroll-view_H .scroll-view-item_H {
		display: inline-block;
		border-radius:0 0 8rpx 8rpx;
		border: 1px solid #f1f1f1;
		width: 270rpx;
		overflow: hidden;
		padding-right: 20rpx;
	}
	
	.scroll-view_H .scroll-view-item_H .thumbnail{
		width: 270rpx;
		height: 200rpx;
		overflow: hidden;
		border-radius: 8rpx 8rpx 0 0;
	}
	
	.scroll-view_H .scroll-view-item_H .footer{
		padding: 20rpx 10rpx;
	}
	
	.scroll-view_H .scroll-view-item_H .footer .title{
		font-size: 24rpx;
		color: #353535;
	}
	
	.scroll-view_H .scroll-view-item_H .footer .desc{
		font-size: 24rpx;
		color: #353535;
	}
</style>
